<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>标题</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<style>
	body{
		overflow: hidden;
	}
	#dbird{position: absolute;}
	.k37{transform: rotateY(180deg);}
	.k38{transform: rotate(-60deg);}
	.k40{transform: rotate(60deg);}
	</style>
</head>
<body>
	<div id="dbird">
		<img src="http://cdn.attach.qdfuns.com/notes/pics/201709/13/164634njefocoiedheq03o.gif" alt="">
	</div>

	<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script>
	var $bird=$('#dbird');
	var pos=$bird.offset();//获取图片的位置
	var $width=$bird.width();//获取图片的宽高
	var $height=$bird.height();
	var speed=20;
	var ev=ev||window.event;
	var kk=39;//默认键值，向右
	var timer=null;
	timer=setInterval(function(){
		clearInterval(timer);
		$(document).keydown(function(ev){
				var key=ev.keyCode;//得到按键的对应键值
				if(key!=kk){
					$bird.removeClass().addClass('k'+key);
				}
				kk=key;
				switch(key){
					case 37://左
						pos.left-=speed;
						if(pos.left<=-$width){
							pos.left=$(window).width();
						}
						break;
					case 38://上
						pos.top-=speed;
						if(pos.top<=-$height){
							pos.top=$(window).height();
						}
						break;
					case 39://右
						pos.left+=speed;
						if(pos.left>=$(window).width()-$width){
							pos.left=-$width;
						}
						break;
					case 40://下
						pos.top+=speed;
						if(pos.top>=$(window).height()-$height){
							pos.top=-$height;
						}
						break;
				}
				$bird.offset(pos);
				})
	},10)
	

	</script>
</body>
</html>